gulp学习笔记

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