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

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

  在接触前端开始就据说过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']);

目录结构：