1】npm install gulp -g 全局安装gulp,查看安装是否成功gulp -v(首先安装node,查看node是否安装成功 node -v)
2】npm init 创建package.json文件
3】npm install gulp --save-dev 本地安装gulp
4】在工程目录下手动创建gulpfile.js文件。
5】安装插件依赖(用到哪个安装哪个)
npm install gulp-concat --save-dev 文件打包
npm install gulp-rename --save-dev 文件重命名
npm install gulp-imagemin --save-dev 图片压缩
npm install gulp-jslint --save-dev js代码校验 慎用
npm install gulp-minify-css --save-dev css压缩
npm install gulp-minify-html --save-dev html压缩
npm install gulp-uglify --save-dev js压缩
npm install gulp-connect --save-dev 设置链接服务
npm install gulp-clean --save-dev //每次打包项目文件后会新成新的文件,旧文件就应该删除。
6】然后你可以在gulpfile.js里最先引入gulp模块后 gulp。
var gulp = require("gulp");
gulp.task('default',function(){
console.log('gulp启动成功');//测试gulp是否启动
})
7】js、html压缩合并(代码例子)
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var minifyHtml = require('gulp-minify-html');
var concat = require('gulp-concat');
gulp.task('uglifyJs',function(){
gulp.src('app/viewModules/**/*.js') //源文件所在路径
.pipe(concat('all.js'))
.pipe(gulp.dest('dist/js'))
.pipe(uglify())
.pipe(gulp.dest('dist/js')) //输出文件路径
});
gulp.task('htmlMinify',function(){
gulp.src('app/viewModules/**/*.html')
.pipe(concat('all.html'))
.pipe(gulp.dest('dist/templates'))
.pipe(minifyHtml())
.pipe(gulp.dest('dist/templates'))
}
gulp.task('default',['uglifyJs','htmlMinify'])
gulp中文网https://www.gulpjs.com.cn