Gulp 自动化的项目构建工具

  在很多场合都会听到前端工和 node 程师推荐 Grunt 来实现项目的自动化,自动化可以自动完成 javascript/coffee/sass/less 等文件的的测试、检查、合并、压缩、格式化、部署文件生成,并监听文件在改动后重复指定的这些步骤。

  得益于 Grunt 基于任务的设计模式,这些步骤可以很好的归类执行,让开发效率得到了一次提升,但杀敌 1000,得自损 800 啊,学习曲线有点高,Gruntfile配置任务很难理解,经常容易忘记。

  Grunt.js 太复杂了,复杂到比使用和配置 Vim 都困难,之前写过得《前端自动化如何利用grunt优化项目?》,glup比较简单,配置逻辑便于理解,效率更高、健壮性更好。

  Gulp构建系统

  Gulp是一个构建系统,开发者可以使用它在网站开发过程中自动执行常见任务。

  比如编译预处理CSS,压缩JavaScript和刷新浏览器,来改进网站开发的过程。  

  官网:http://gulpjs.com/
  插件:http://gulpjs.com/plugins/http://npm.taobao.org/

  一、Gulp安装

  1.Gulp是基于Node.js构建的,所以要先安装node.js。

  2.安装Gulp的过程十分简单。首先,需要在全局安装Gulp包:

npm install -g gulp  //全局安装

  3.然后,在项目目录安装Gulp:

npm install --save-dev gulp

  4.查看gulp是否安装成功

gulp -v

  二、安装常用gulp插件

* sass的编译(gulp-ruby-sass)
* 自动添加css前缀(gulp-autoprefixer)
* 压缩css(gulp-minify-css)
* js代码校验(gulp-jshint)
* 合并js文件(gulp-concat)
* 压缩js代码(gulp-uglify)
* 压缩图片(gulp-imagemin)
* 自动刷新页面(gulp-livereload)
* 图片缓存,只有图片替换了才压缩(gulp-cache)
* 更改提醒(gulp-notify)
* 清除文件(del)

  三、创建配置文件 gulpfile.js

  在项目的根目录创建配置文件 gulpfile.js,Gulp 仅有 5 个方法就能组合出你需要的任务流程:task, run, watch, src, dest

//    js/app.js:指定确切的文件名。
//    js/*.js:某个目录所有后缀名为js的文件。
//    js/**/*.js:某个目录及其所有子目录中的所有后缀名为js的文件。
//    !js/app.js:除了js/app.js以外的所有文件。
//    *.+(js|css):匹配项目根目录下,所有后缀名为js或css的文件。


//引入gulp插件node模块
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    //gminifycss = require('gulp-minify-css'),
    compass = require("gulp-compass"),
    jshint = require('gulp-jshint'),
    sourcemaps = require('gulp-sourcemaps'),
    minicss = require('gulp-mini-css'),
    connect = require('gulp-connect'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    imagemin = require('gulp-imagemin'),
    concat = require('gulp-concat'),
    livereload = require('gulp-livereload'),
    notify = require('gulp-notify');

//Gulp 仅有 5 个方法就能组合出你需要的任务流程:task, run, watch, src, dest

    // 定义web模块,类似于全局的http-server
    gulp.task('http-server', function() {
        connect.server({
            livereload: true
        });
    });
    
    //gulp.task(name, fn)gulp模块的task方法,用于定义具体的任务。它的第一个参数是任务名,第二个参数是任务函数。
    gulp.task('uglify',function(){
    
        //gulp.src(glob)返回了一个可读的stream,如此行返回了./js/*.js下的全部
        gulp.src('./js/*.js')
            .pipe(uglify())
             //gulp.dest(glob)返回一个可写的stream,如此行是将文件流写入到 ./dist/js 里的对应路径下            
            .pipe(gulp.dest('./dist/js'))
            .pipe(notify({message:'可以了 ok !'}))
    })
    
    //压缩样式
    gulp.task('mincss',function(){
        gulp.src('./css/*.css')
            .pipe(mincss())
            .pipe(gulp.dest('./dist/js'))
    })
    
    // 创建Compass任务
    gulp.task('compass', function() {
        gulp.src('./scss/**')
            .pipe(compass({
                comments: false,
                css: 'css',
                sass: 'scss',
                image: 'img'
            }));
    });    
    
    //编译sass
    gulp.task("sass",function(){
        gulp.src('./scss/.scss')
            .pipe(sourcemaps.init())
            .pipe(sass())
            .pipe(mincss())
            .pipe(sourcemaps.write('/'))
            .pipe(gulp.dest('./css/*.css'))
    })
    
    //检查js
    gulp.task("jshint",function(){
        gulp.src("./js/.js")
            .pipe(jshint())
            .pipe(jshint.reporter('default')); //导入到模块任务里面
    })
    
    // 合并、压缩文件
    gulp.task('scripts', function() {
        gulp.src('./js/*.js')
            .pipe(concat('all.js'))
            .pipe(gulp.dest('./dist/js'))
            .pipe(rename('all.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('./dist/js'))
            .pipe(livereload())
    });    
    
    //压缩图片
    gulp.task('imagemin',function(){
        gulp.src('./image/*.*')
            .pipe(imagemin())
            .pipe(gulp.dest('./dist/image'))
            .pipe(notify({message:'compress ok !'}))
    })
    
    // 检测HTML变化并刷新
    gulp.task("html",function(){
        gulp.src('*.*')
            .pipe(livereload());        
    })
    
    //定义名为"watch"的任务
    gulp.task('watch',function(){
        gulp.watch('./image/*.*');
        gulp.watch('./js/*.js');
        gulp.watch('./css/*.css');
        gulp.watch('./scss/*.scss');
    })    
    //每个gulpfile.js里都应当有一个dafault任务,它是缺省任务入口(类似C语言的main()入口),运行gulp的时候实际只是调用该任务(从而来调用其它的任务)
    gulp.task('default',function(){
         //gulp.run(tasks)表示运行对应的任务,这里表示执行名
        gulp.run('uglify','imagemin','compass');
        //执行'watch'监听任务
        gulp.run('watch');    
        // 监听文件变化
        gulp.watch([
            '*.*',
            './scss/**', 
            './img/**',
            './js/*.js'], function() {
            livereload.listen();
            gulp.run('compass', 'lint', 'html', 'sass','imagemin','scripts');
        });        
    })

 

  四、运行gulp

  通过gulp+任务名称,就可以运行gulp例

gulp watch

 

  参考资料:Gulp.js 参考手册,自动化构建利器

       是时候搁置Grunt,耍一耍gulp了

       Gulp前端自动化工具 

       Gulp:任务自动管理工具   

       yeoman自动化处理   

你可能感兴趣的:(自动化)