关于gulp的-暂定

[viviannow]

前期安装与配制：

1、nodejs(自带npm 搭建node环境) => 查看是不是安装成功 node-v npm -v

2、npm install -g gulp => -g表示在全局环境安装，以便任何项目都能使用它 gulp -v

3、npm install gulp --save-dev =>【需要将gulp安装到项目本地】使用 —-save-dev 来更新package.json文件，更新 devDependencies 值，以表明项目需要依赖gulp。

4、npm install gulp-jshint gulp-sass gulp-concat gulp-uglify gulp-rename --save-dev 安装依赖

5、新建gulpfile文件并配制

6、完成：在命令行运行gulp，即可

PS: 要用什么gulp插件：npm install 安装即可，如 npm install gulp-jsint

[viviannow]

gulpfile.js文件 gulp只有五个方法： task ， run ， watch ， src ，和 dest ，在项目根目录新建一个js文件并命名为 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');
});

});