gulp入门

Posted 2020-07-31 until—u

参考：http://www.ydcss.com/archives/18   http://www.tuicool.com/articles/FJVNZf

1.淘宝npm服务 ：npm install cnpm -g --registry=https://registry.npm.taobao.org 

2.全局安装gulp cnpm install gulp -g    查看版本：gulp -v

3.进到项目根目录执行：  cnpm init   该命令创建package.json文件

4.本地安装gulp cnpm install gulp --save-dev

使用 —-save-dev 来更新package.json文件，更新 devDependencies值，以表明项目需要依赖gulp，该依赖关系会保存在package.json中

5.安装执行任务需要的插件 ： cnpm install jshint gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev

jshint要安装

6.新建 gulpfile.js

// 引入 gulp
var gulp = require(‘gulp‘); 

// 引入组件
var jshint = require(‘gulp-jshint‘);
var sass = require(‘gulp-sass‘);
var concat = require(‘gulp-concat‘);
var uglify = require(‘gulp-uglify‘);
var rename = require(‘gulp-rename‘);

// 检查脚本
gulp.task(‘lint‘, function() {
    gulp.src(‘./js/*.js‘)
        .pipe(jshint())
        .pipe(jshint.reporter(‘default‘));
});

// 编译Sass
gulp.task(‘sass‘, function() {
    gulp.src(‘./scss/*.scss‘)
        .pipe(sass())
        .pipe(gulp.dest(‘./css‘));
});

// 合并，压缩文件
gulp.task(‘scripts‘, function() {
    gulp.src(‘./js/*.js‘)
        .pipe(concat(‘all.js‘))//合并所有js到all.js中
        .pipe(gulp.dest(‘./dist‘))
        .pipe(rename(‘all.min.js‘))//重命名
        .pipe(uglify())//丑化-压缩
        .pipe(gulp.dest(‘./dist‘));
    gulp.src(‘./js/xxxxxx‘)....多个文件夹的情况
});

// 默认任务
gulp.task(‘default‘, function(){
    gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);

    // 监听文件变化
    gulp.watch(‘./js/*.js‘, function(){
        gulp.run(‘lint‘, ‘sass‘, ‘scripts‘);
    });
});

7.执行任务 ： gulp scripts