gulp

自动化构建工具gulp的使用

1. 安装gulp:
   使用node.js在全局环境下安装gulp，安装命令如下：

npm  install   gulp -g 

安装好之后可以通过：

gulp -v      //查看当前gulp的版本，安装成功则可以看到相应的版本，安装失败则会报错

2.使用gulp构建项目：
首先必须在项目的目录下，通过git 再次安装局部的gulp，目的是因为在项目内需要使用gulp内的相应语法。

npm install  gulp  --save-dev   //项目内安装gulp

–save：将保存配置信息至package.json；
-dev : 保存至package.json的devDependencies节点 ;
同时需要手动编写一个驱动gulp启动的gulpfile.js文件：如下

'use strict'         // 使用ES5  严格模式


var  gulp=require('gulp'),//引入 gulp
	 webserver=require('gulp-webserver'),  //引入 webserver 服务器
	 sass=require('gulp-sass'),  //引入  sass 解析模块
	 minifycss=require('gulp-minify-css'), //引入  css压缩模块
	 cssimport=require('gulp-cssimport'),
	 //imagemin=require('gulp-imagemin'),   //引入 图片压缩
	 //uglify=require('gulp-uglify'),     //引入js 压缩
	 concat=require('gulp-concat'),     //引入文件合并
	 noify=require('gulp-notify'),		//引入提示信息
	 livereload=require('gulp-livereload');  //网页自动更新   (服务器控制客户端同步更新)



//使用webserver 启动一个web服务器      任务名称可以自定义·

gulp.task('webserver', function() {
  gulp.src('') //src--root dir
    .pipe(webserver({
        path: '/',
        host: '127.0.0.1',     //访问地址
        port: '9000',			//访问端口
        livereload: true,
        directoryListing: true,
        open: true
    }));
});


//检查文件
gulp.task('html',function(){              
	gulp.src('./**/*.html')
        .pipe(webserver());  //管道
});


//编译scss任务

gulp.task('sass',function(){
	 //sass()方法用于转换sass到css
    return  gulp.src('css/index.scss')    //解析的scss文件路径名  可以添加多个用逗号隔开   那么将会将多个scss文件并为一个css
           .pipe(sass()) // Converts Sass to CSS with gulp-sass
           .pipe(gulp.dest('dist/css'))  //gulp.dest输出           将scss文件传化为css之后css文件存放的位置   使用的时候直接调用main.css即可
});
//编译ES6
gulp.task("es6", function () {
    return gulp.src("es6/*.js")  //   将es6目录下的所有js文件 转义成es5
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest("dist"))
        .pipe(notify({ message: 'ES6 task complete' }));

});

//设置  运行gulp  之后会默认执行的任务
gulp.task('default',['webserver','watch','sass']);   //gulp服务一启动  自动执行的任务

// 图片压缩
gulp.task('images', function() {
    return gulp.src('img/**/*')     //将img目录下的所有文件，压缩  输出至 dist/images目录下
        .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
        .pipe(gulp.dest('dist/images'))
        .pipe(notify({ message: 'Images task complete' }));
});
// 合并、压缩css文件
gulp.task('css', function() {
    return gulp.src([
            'dist/css/*.min.css',           //将dist/css/目录下的所有css文件合并成一个文件输出至  dist/css目录下
            'dist/css/*.css'
        ])
        .pipe(concat('all.css'))     //合并后的文件名为  all.css
        .pipe(gulp.dest('dist/css'))
       // .pipe(rename({ suffix: '.min' }))
        .pipe(minifycss())
       // .pipe(gulp.dest('dist/css'))
        .pipe(notify({ message: 'css task ok' }))
        .pipe(webserver());
});

// 合并、压缩js文件
gulp.task('js', function() {
    return gulp.src([
            'lib/**/*.min.js',
            'lib/requirejs/require.js',
            'js/**/*.js'
        ])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('dist/js'))
        .pipe(notify({ message: 'js task ok' }))
        //.pipe(connect.reload());
        .pipe(webserver());
});
// 复制html
gulp.task('html', function() {
    return gulp.src('*.html')             //将所有的html文件，复制到dist文件下
        .pipe(gulp.dest('dist'))
    //.pipe(notify({ message: 'lint task ok' }));
});
// 复制font
gulp.task('font', function() {
    return gulp.src('font/*')                    //将font目录下所有的文件，复制到
       // .pipe(rename({dirname: ''}))
        .pipe(gulp.dest('dist/fonts'))     //dist/fonts文件下
    //.pipe(notify({ message: 'lint task ok' }));   提示信息
});

// 监听文件变化
gulp.task('watch', function() {
    // 看守所有.scss档
    gulp.watch(['**/index.scss'],['sass']);   //设置监控的 指定的  scss文件，当监控的文件发生改变时，会自动运行gulp sass 命令-->从而更新到css-->页面变化
    gulp.watch(['**/*.html'], ['html']);   //设置监控所有的html文件    当监控文件发生改变时，触发 gulp html指令
gulp.watch(['**/*.js'],['js']);     //设置监控 所有的js文件
});

安装完上述所gulpflie.js内require()的文件，之后直接在git中运行:

gulp

项目搭建完成!
当需要将项目打包上线的时候，需要自己编写一个gulp命令

gulp.task('自定义任务名',['html','images','js','css']);   //数组内的方法会一一执行。

//直接在命令行输入：
gulp  自定义打包任务名  
//打包完成!