gulp 初体验-CSDN博客

查看 NPM 版本

$ npm --version

简写

$ npm -v

全局安装 Gulp CLI

$ npm install -g gulp-cli

初始化 Node 模块 package.json

$ npm init

安装 package.json 中的插件

$ npm install

安装本地 Gulp

$ npm install --save-dev gulp

简写

$ npm install -D gulp

安装 Gulp4 (推荐)

$ npm install --save-dev gulpjs/gulp.git#4.0

安装插件

$ npm install --save-dev <plugin-name>

创建 Gulpfile.js

var gulp = require('gulp');
var del = require('del');
var jshint = require('gulp-jshint'); //检查 js 文件代码风格   需要安装插件 jshint gulp-jshint
var uglify = require('gulp-uglify');  //压缩 js 文件
var concat = require('gulp-concat');  //合并文件
var less = require('gulp-less');
var minifyCSS = require('gulp-cssnano');
var prefix = require('gulp-autoprefixer');
var bSync = require('browser-sync'); //搭建实时更新服务器

//安装插件 cnpm install -D del jshint gulp-jshint gulp-uglify gulp-concat gulp-less gulp-cssnano gulp-autoprefixer browser-sync
//gulp.task 提供命令行直接调用这个函数的接口

//删除构建目录
gulp.task('clean', function () {
    return del(['dist']);
});

//处理 CSS
gulp.task('styles', function () {
    return gulp.src('app/styles/main.less')
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(prefix())
        .pipe(gulp.dest('dist/styles'));
});

//检查 js 代码风格
gulp.task('tests', function () {
    return gulp.src(['app/scripts/**/*.js', '!app/scripts/plugin/**/*.js'])
        .pipe(jshint())
        .pipe(jshint.reporter('default'))   // 对代码进行报错提示
        .pipe(jshint.reporter('fail'));
});

//处理 JS
gulp.task('scripts',
    gulp.series('tests', function scriptsInternal() {
        return gulp.src('app/scripts/**/*.js')   //创建文件的可读流
            .pipe(concat('main.min.js'))
            .pipe(uglify())
            .pipe(gulp.dest('dist/scripts'));  //文件保存位置
    })
);

//搭建实时更新服务器
gulp.task('server', function (done) {
    bSync({
        server:{
            baseDir:['dist','app']
        }
    });
    done();  //task 完成时通知 Gulp
});

//依赖链
//gulp.series  顺序执行 Gulp task
//gulp.parallel 并行执行 Gulp task
gulp.task('default',
    gulp.series('clean',
        gulp.parallel('styles','scripts'),
        'server',
        function watcher(done) {  //检测文件变化
            gulp.watch(['app/scripts/**/*.js', '!app/scripts/plugin/**/*.js'],gulp.parallel('scripts'));
            gulp.watch('app/styles/main.less',gulp.parallel('styles'));
            gulp.watch('dist/**/*',bSync.reload());
            done();
        }
        )
);