gulp入门

入门

http://www.tuicool.com/articles/FJVNZf

1、全局安装

sudo npm install -g gulp 

 

以下需要进入项目目录:

2、项目安装

如果项目需要其他nodejs其它包,请先创建package.json,只用gulp,可以直接使用下面命令

cnpm install --save-dev gulp

3、安装gulp组件

例如:

npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 

4、创建 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'))
        .pipe(gulp.dest('./dist'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist'));
});

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

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

5、命令行执行 gulp 即可

gulp default

6、其它

gulp只有五个方法: task , run , watch , src ,和 dest 。

gulp本身不会处理,所有处理都需要第三方的组件

 

一些组件:

gulp-jshint 会检查js文件有没有报错或警告

gulp-htmlmin 压缩html,可以压缩页面javascript、css,去除页面空格、注释,删除多余属性等操作

gulp-uglify 压缩javascript文件,减小文件大小 注意还有合并,改名等,参见上面

posted @ 2016-08-28 23:02  忘忧般若汤  阅读(230)  评论(0编辑  收藏  举报