gulp运用

gulp的含义

gulp 是前端开发过程中对代码进行构建的工具， 是自动化项目的构建利器； 她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；大大提高我们的工作效率

gujp工作环境安装

1.安装node.js

node -v

2. NPM命令

在安装node.js之后操作 npm -v

3.全局安装 gulp

npm install --global gulp

4.淘宝镜像加快安装

http://npm.taobao.org/
npm install -g cnpm –registry=https://registry.npm.taobao.org
以后安装全部按照cnpm命令操作

5.选择工作目录 gulp

6.初始化 npm init

会出现一个package.json文件

7.cnpm install gulp –save-dev

创建gulp工作环境（node_modules）

8.创建gulpfile.js文件

9.常用格式

gulp.task('sass', function () {  return gulp.src('src/styles/*.scss')    .pipe(sass().on('error', sass.logError))    .pipe(gulp.dest('dist/css/'));});

监听

gulp.task('dist', function() {  // src/index.html  gulp.watch('src/index.html', ['copy']);  gulp.watch('src/styles/*.less', ['style']);});

编译sass文件

插件

gulp-sass

编译：

var gulp = require('gulp');var sass = require('gulp-sass');gulp.task('sass', function () {  return gulp.src('src/styles/*.scss')    .pipe(sass().on('error', sass.logError))    .pipe(gulp.dest('dist/css/'));});

监听：

gulp.task('watcher', function() {        gulp.watch('src/styles/*.scss', ['sass']);});

压缩js文件

插件

gulp-uglify和pump

第一种方式

var uglify = require('gulp-uglify');var pump = require('pump');gulp.task('js', function (cb) {  pump([        gulp.src('src/js/*.js'),        uglify(),        gulp.dest('dist/js/')    ],    cb  );});

第二种方式

var uglify = require('gulp-uglify');gulp.task('jsc', function () {    gulp.src("src/js/*.js")    .pipe(uglify())    .pipe(gulp.dest('dist/js/')  );});

js语法检查

插件

gulp-jshint和gulp-jshint-html-reporter注意安装：npm install --save-dev jshint gulp-jshint

第一种显示

var jshint = require(‘gulp-jshint’);

gulp.task(‘jiancha’, function() {
gulp.src(‘src/js/js.js’)
.pipe(jshint())
.pipe(jshint.reporter(‘default’));
});

第二种显示

var jshint = require('gulp-jshint');gulp.task('lint', function() {    gulp.src('src/js/js.js')    .pipe(jshint())    .pipe(jshint.reporter('gulp-jshint-html-reporter', {      filename:'error.html',      createMissingFolders : false      }));});

压缩图片

插件

gulp-imagemin

var imagemin = require(‘gulp-imagemin’);

gulp.task(‘img1’,function(){
gulp.src(‘src/img/*jpg’)
.pipe(imagemin())
.pipe(gulp.dest(‘dist/images/’))
}
);

压缩html

插件

gulp-minify-html

方式

var ghtml = require('gulp-minify-html');gulp.task('html', function() {     gulp.src('src/html.html')    .pipe(ghtml())    .pipe(gulp.dest('dist/html/'));});

合并js

插件

gulp-concat

方法

var concat=require(‘gulp-concat’);
gulp.task(“hebingjs”,function(){
gulp.src(“src/js/*.js”)
.pipe(concat(“all.js”))
.pipe(gulp.dest(“dist/js/”));
})

重名名

插件

gulp-rename

方法

var rename=require(‘gulp-rename’);
gulp.task(“rename”,function(){
gulp.src(“src/js/js.js”)
.pipe(rename(“wode.js”))
.pipe(gulp.dest(“dist/js/”))
})

插件列表

• 编译 Less：gulp-less
• 编译 Jade: gulp-jade
• 创建本地服务器：gulp-connect
• 合并文件：gulp-concat
• 最小化 js 文件：gulp-uglify
• 重命名文件：gulp-rename
• 最小化 css 文件：gulp-minify-css
• 压缩html文件 gulp-minify-html
• 最小化图像：gulp-imagemin