如何使用gulp

gulp安装

npm install gulp-cli -g  
//在全局安装一个客户端命令工具
npm install gulp -D
//在本地node-modules中安装gulp
注：我安装到这一步的时候，npm报错
//gyp ERR! stack Error: Can't find Python executable "python",
//you can set the PYTHON env variable.

touch gulpfile.js
gulp --help

在项目下新建dist(发布上线)和src(本地编辑)文件夹

mkdir dist src
//gulp把src文件夹下的文件压缩到dist文件中发布上线

线下编辑的时候，会把很多功能拆成不同模块，发布上线的时候，使用gulp压缩打包成一个文件。

gulp插件

npm install --save-dev gulp-cssnano  //css的压缩
npm install --save-dev gulp-concat  //文件合并

gulp使用

把多个css文件合并成一个css文件，并且对css进行压缩

//gulpfile.js文件
var gulp = require('gulp');

var cssnano = require('gulp-cssnano');
var concat = require('gulp-concat');

gulp.task('css',function(){  //新建一个任务
    gulp.src('./src/css/*.css')  
    //把这个文件下所有css变为数据流
        .pipe(concat('index-merge.css')) //合并这个文件
        .pipe(cssnano()) //压缩
        .pipe(gulp.dest('dist/css/'));  //存放到这个位置
})
//通过gulp css 就可以执行压缩合并

//也可以再声明一个任务
gulp.task('default',['css'])
//使用gulp default 也可以调用css压缩

压缩合并html, css, js, img文件

//gulpfile.js文件
var gulp = require('gulp');

// 引入组件
var minifycss = require('gulp-minify-css'), // CSS压缩
    uglify = require('gulp-uglify'), // js压缩
    concat = require('gulp-concat'), // 合并文件
    // rename = require('gulp-rename'), // 重命名
    // clean = require('gulp-clean'), //清空文件夹
    minhtml = require('gulp-htmlmin'), //html压缩
    jshint = require('gulp-jshint'), //js代码规范性检查
    imagemin = require('gulp-imagemin'); //图片压缩


gulp.task('html', function() {
  gulp.src('src/*.html')
    .pipe(minhtml({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));
});

gulp.task('css', function(argument) {
    gulp.src('src/**/*.css')
        .pipe(concat('merge.min.css'))
        // .pipe(rename({
        //  suffix: '.min'
        // }))
        .pipe(minifycss())
        .pipe(gulp.dest('dist/css/'));
});
gulp.task('js', function(argument) {
    gulp.src('src/js/*.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'))
        .pipe(concat('merge.min.js'))
        // .pipe(rename({
        //  suffix: '.min'
        // }))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js/'));
});

gulp.task('img', function(argument){
    gulp.src('src/imgs/*')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/imgs'));
});

// gulp.task('clear', function(){
//  gulp.src('dist/*',{read: false})
//      .pipe(clean());
// });

gulp.task('build', ['html', 'css', 'js', 'img']);

监控项目文件变动，自动刷新浏览器，本地调试

var gulp = require('gulp');

// 引入组件
var browserSync = require('browser-sync').create();
//创建一个

var scp = require('gulp-scp2');
var fs = require('fs');

gulp.task('reload', function(){
    browserSync.reload();
});
//定义一个reload任务，执行这个任务时候，让浏览器页面重新加载

gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: "./src"
        }
    });
    gulp.watch(['**/*.css', '**/*.js', '**/*.html'], ['reload', 'scp']);
    //监听，当前面的文件发送改变时，执行后面的任务
});
//新建一个server任务，启动一个服务器，基准目录src
//gulp server时，启动服务器

gulp.task('scp', function() {
    return gulp.src('src/**/*')
        .pipe(scp({
            host: '121.40.201.213',
            username: 'root',
            privateKey: fs.readFileSync('/Users/wingo/.ssh/id_rsa'),
            dest: '/var/www/fe.xxx.com',
            watch: function(client) {
                client.on('write', function(o) {
                    console.log('write %s', o.destination);
                });
            }
        }))
        .on('error', function(err) {
            console.log(err);
        });
});

监控项目文件变动，自动压缩、合并、打包，上传到服务器

var gulp = require('gulp');
var rev = require('gulp-rev');
var revReplace = require('gulp-rev-replace');
var useref = require('gulp-useref');
var filter = require('gulp-filter');
var uglify = require('gulp-uglify');
var csso = require('gulp-csso'); //css优化压缩
var clean = require('gulp-clean'); //文件夹清空

gulp.task("index", function() {
  var jsFilter = filter("**/*.js", {restore: true});
  var cssFilter = filter("**/*.css", {restore: true});

  var userefAssets = useref.assets();


  return gulp.src("src/index.html")
    .pipe(userefAssets)      // Concatenate with gulp-useref
    .pipe(jsFilter)
    .pipe(uglify())             // Minify any javascript sources
    .pipe(jsFilter.restore)
    .pipe(cssFilter)
    .pipe(csso())               // Minify any CSS sources
    .pipe(cssFilter.restore)
    .pipe(rev())                // Rename the concatenated files
    .pipe(userefAssets.restore())
    .pipe(useref())
    .pipe(revReplace())         // Substitute in new filenames
    .pipe(gulp.dest('dist'));
});

gulp.task('clear', function(){
    gulp.src('dist/*',{read: false})
        .pipe(clean());
});