gulp入门

参考：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中，为什么要保存？——》》 http://www.ydcss.com/archives/18#why

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

安装完插件后package.json内容如下

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

通配符路径匹配示例：

“src/a.js”：指定具体文件；

“*”：匹配所有文件    例：src/*.js(包含src下的所有js文件)；

“**”：匹配0个或多个子文件夹    例：src/**/*.js(包含src的0个或多个子文件夹下的js文件)；

“{}”：匹配多个属性    例：src/{a,b}.js(包含a.js和b.js文件)  src/*.{jpg,png,gif}(src下的所有jpg/png/gif文件)；

“!”：排除文件    例：!src/a.js(不包含src下的a.js文件)；