gulp记录

npm install gulp -g　　//全局安装gulp

gulp -v　　//此处若有问题，配置环境变量，npm config get prefix得到路径

npm init　　//新建nodejs项目配置文件package.json，其中项目name、version、description为必填项

package.json

{
    "name": "project",
    "version": "1.0.0",
    "description": "this is a test",
    "main": "gulpfile.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC",
    "devDependencies": {
        "browser-sync": "^2.14.0",
        "del": "^2.2.2",
        "gulp": "^3.9.1",
        "gulp-cache": "^0.4.5",
        "gulp-clean-css": "^2.0.12",
        "gulp-if": "^2.0.1",
        "gulp-imagemin": "^3.0.3",
        "gulp-less": "^3.1.0",
        "gulp-minify-css": "^1.2.4",
        "gulp-sass": "^2.3.2",
        "gulp-uglify": "^2.0.0",
        "gulp-useref": "^3.1.0",
        "run-sequence": "^1.2.2"
    }
}

npm install gulp --save-dev　　//当前项目安装gulp，--save将保存配置信息至package.json，-dev保存至package.json的devDependencies节点

npm install gulp-sass --save-dev　　//安装gulp-sass等等

配置gulpfile.js，这里的名字要和package.json的main指定的js文件对应起来

var gulp = require('gulp');//告知node去node_modules中查找gulp包，先局部查找，找不到就全局查找，找到赋予gulp变量我们就可以使用啦
var sass = require('gulp-sass');
var browserSync = require('browser-sync');
var useref = require('gulp-useref');
var uglify = require('gulp-uglify');
var gulpIf = require('gulp-if');
var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');
var cache = require('gulp-cache');
var del = require('del');
var runSequence = require('run-sequence');

gulp.task('task-name',function(){//task-name是给你任务起的名字，稍后运行gulp task-name将会执行后面的函数
    console.log('Hello World');
});

gulp.task('sass', function(){
    return gulp.src('src/sass/**/*.scss')//Gets all files ending with .scss in src/sass and children dirs
    .pipe(sass()) // Using gulp-sass
    .pipe(gulp.dest('src/sass-css'))//在执行命令之后将生成对应的css文件存放到相应路径，新添文件目录后重新编译下即可
    .pipe(browserSync.reload({//每次css文件更改都刷新一下浏览器
        stream: true
    }))
});
//创建一个broswerSync任务，我们需要告知它，根目录在哪里
gulp.task('browserSync', function() {
    browserSync({
        server: {
            baseDir: 'src'
        }
    })
})

//gulp.watch('src/sass/**/*.scss',['sass']);

//通常我们监听的还不只是一个文件，把它变成一个任务：
// gulp.task('watch', function(){
//     gulp.watch('src/sass/**/*.scss', ['sass']);
//     // Other watchers
// })

//在watch任务之前告知Gulp，先把browserSync和Sass任务执行了再说
gulp.task('watch',['browserSync','sass'],function(){
    gulp.watch('src/sass/**/*.scss', ['sass']);
    // Other watchers
    gulp.watch('src/**/*.html',browserSync.reload);//这些目录动了也刷新
    gulp.watch('src/**/*.js',browserSync.reload);
})

// gulp.task('useref',function(){//合并
//     return gulp.src('src/*.html')
//         .pipe(useref())
//         .pipe(gulp.dest('dist'));
// });

// 合并并压缩js
gulp.task('useref', function(){
    return gulp.src('src/*.html')
        .pipe(useref())//顺序！！
        .pipe(gulpIf('*.js', uglify())) // Uglifies Javascript files
        .pipe(gulp.dest('dist'));
});
// 压缩css
gulp.task('minify-css', function() {
    return gulp.src('src/**/*.css')
        .pipe(cleanCSS({compatibility: 'ie8'}))
        .pipe(gulp.dest('dist'));
});


gulp.task('images', function(){
    return gulp.src('src/images/**/*.+(png|jpg|gif|svg)')
        .pipe(imagemin())
        .pipe(gulp.dest('dist/images'))
});

gulp.task('images', function() {
    return gulp.src('src/images/**/*.+(png|jpg|jpeg|gif|svg)')
        // Caching images that ran through imagemin
        .pipe(cache(imagemin({
            interlaced: true,
        })))
        .pipe(gulp.dest('dist/images'))
});

// gulp.task('clean', function() {
//     del('dist');
// });

gulp.task('clean:dist', function(callback){
    return del(['dist/**/*', '!dist/images', '!dist/images/**/*'], callback)
});


// gulp.task('clean', function() {
//     del('dist');
// });

gulp.task('clean', function(callback) {
    del('dist');
    return cache.clearAll(callback);
})


gulp.task('default', function (callback) {
    runSequence(['sass','browserSync', 'watch'],
        callback
    )
});


gulp.task('build', function(callback) {
    runSequence(
        'clean:dist',
        'sass',
        ['useref', 'images','minify-css'],
        callback
    )
})