加载中…
正文 字体大小:

前端工具gulp的用途和使用方法

(2015-07-07 21:42:28)
标签:

杂谈

分类: 前端设计

    在接触前端开始就听说过grunt和gulp是很叼的前端构建工具,但不知道到底有多叼,只是听说可以自动编译less,sass为css,目前还没有使用less和sass,所以也就没有尝试使用grunt和gulp。但是作为一个技术爱好者还是经不住诱惑,照着网上的教程简单使用了一下,总算是知道有什么用处了,因为都说gulp比grunt更简单好用,就以gulp的使用方法为例来说明一下。
    1.文件合并:关于文件合并很多人存在这样的疑惑,在前端开发中到底该把所有js和css写在一个文件里还是各个页面分开写,我的建议是开发的时候分开写,上线的时候合并为一个,这样的好处是对于浏览器来说,不同页面中相同的文件默认会请求一次缓存下来,其他页面请求相同文件时就直接从缓存中读取,减少文件的网络请求可以提高网页速度,所以文件合并的是很有必要的。


    2.文件压缩:既然都合并了,何不再压缩一下呢


    3.语法检查:这个功能一般会和下面第4条功能配合使用,当文件修改的时候检查是否有语法错误,并在命令行中输出错误信息。


    4.监听文件变化:监听某个目录下文件是否修改,修改的话就执行特定的操作,比如上面几个操作。
    以上4点是比较常用的功能,更多功能根据自己需要添加


  1. var gulp = require('gulp');
  2. var jshint = require('gulp-jshint');//语法检查
  3. var concat = require('gulp-concat');//合并文件
  4. var uglify = require('gulp-uglify');//压缩代码
  5. var rename = require('gulp-rename');//重命名
  6. // 语法检查
  7. gulp.task('jshint', function () {
  8. return gulp.src('public/javascripts/*.js')
  9. .pipe(jshint())
  10. .pipe(jshint.reporter('default'));
  11. });
  12. // 合并文件之后压缩代码
  13. gulp.task('minify', function (){
  14. return gulp.src('public/javascripts/*.js')
  15. .pipe(concat('all.js'))
  16. .pipe(gulp.dest('public/javascripts/dist'))
  17. .pipe(uglify())
  18. .pipe(rename('all.min.js'))
  19. .pipe(gulp.dest('public/javascripts/dist'));
  20. });
  21. // 监视文件的变化
  22. gulp.task('watch', function () {
  23. gulp.watch('public/javascripts/*.js', ['jshint', 'minify']);
  24. });
  25. // 注册缺省任务
  26. gulp.task('default', ['jshint', 'minify', 'watch']);
  27. // gulp.task('default', ['jshint', 'minify']);
目录结构:
前端工具gulp的用途和使用方法





0

阅读 评论 收藏 转载 喜欢 打印举报
已投稿到:
  • 评论加载中,请稍候...
发评论

       

    发评论

    以上网友发言只代表其个人观点,不代表新浪网的观点或立场。

      

    新浪BLOG意见反馈留言板 不良信息反馈 电话:4006900000 提示音后按1键(按当地市话标准计费) 欢迎批评指正

    新浪简介 | About Sina | 广告服务 | 联系我们 | 招聘信息 | 网站律师 | SINA English | 会员注册 | 产品答疑

    新浪公司 版权所有