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']);

项目结构目录：