gulp项目搭建流程

gulp项目搭建流程

项目初始化

npm install --global gulp 或 npm install -g gulp

gulp -v //查看版本

npm init //出现package.json文件

npm install gulp --save-dev //本地创建

创建gulpfile.js主文件

常用 gulp 插件

编译 less ：gulp-less; //www.npmjs.com/package/gulp-less

创建本地服务器: gulp-connect //www.npmjs.com/package/gulp-connect

合并文件: gulp-concat//www.npmjs.com/package/gulp-concat

最小化js文件: gulp-uglify //www.npmjs.com/package/gulp-uglify

压缩css: gulp-cssnano //www.npmjs.com/package/gulp-cssnano

最小化图像: gulp-imagemin //www.npmjs.com/package/gulp-imagemin

JS语法检查: gulp-jshint //www.npmjs.com/package/gulp-jshint

jshint在gulp中的使用

npm install jshint gulp-jshint --save-dev =>

在gulpfile中

var jshint = require('gup-jshint');

var packageJSON = require('./package');

var jshintConfig = packageJSON.jshintConfig;

jshintConfig.lookup = false;

gulp.task('jshint',function(){

gulp.src('src/script/*.js')

.pipe(jshint(jshintConfig))

.pipe(jshint.reporter('default'));

}) =>

配置.jshintrc文件

{

"undef": true,

"unused": true,

"predef": [ "MY_GLOBAL" ]

} =>

配置package.json文件添加

"jshintConfig":{

"undef": true,

"unused": true,

"predef": [ "MY_GLOBAL", "ads" ]

}

最终gulpfile文件代码：

var gulp = require('gulp');var less = require('gulp-less');var cssnano = require('gulp-cssnano');//css 压缩var concat = require('gulp-concat');//js合并var uglify = require('gulp-uglify');//js压缩var rename = require('gulp-rename');//别名var jshint = require('gulp-jshint');//语法检查var packageJSON  = require('./package');var jshintConfig = packageJSON.jshintConfig;var connect = require('gulp-connect'); //自动刷新jshintConfig.lookup = false;gulp.task('less',function(){//gulp.src取一个文件//pipel里传递一个要执行的操作//gulp.dest目的地终点gulp.src('src/less/*.less').pipe(less()).pipe(cssnano()).pipe(gulp.dest('build/css'));});gulp.task('jshint',function(){gulp.src('src/script/*.js').pipe(jshint(jshintConfig)).pipe(jshint.reporter('default'));})gulp.task('concat',function(){gulp.src('src/script/*.js').pipe(concat('fn-script.js'))//合并后js名.pipe(uglify()).pipe(rename('fn-script.min.js')).pipe(gulp.dest('build/script'));});gulp.task('connect',function(){connect.server({root: './',port: 8000,livereload: true});});gulp.task('html',function(){     gulp.src('src/*.html')   .pipe(connect.reload())   .pipe(gulp.dest('build'));});gulp.task('dish',function(){gulp.watch('src/less/fn-style.less',['less']);gulp.watch('src/script/*.js',['concat']);gulp.watch('src/script/*.js',['jshint']);gulp.watch('src/*.html',['html']);});gulp.task('default',['connect','dish']);

项目结构目录：