Gulp: 前端开发自动化

自从nodejs流行后，越来越多好用的前端工具出现，大大解放前端工程师的劳动力。gulp无疑是前端自动化最好用的工具之一，本文是我使用gulp搭建自己项目的一些经验。

NPM

首先安装node和npm，npm是下载管理包的工具，官网直接下载安装nodejs，会自动安装npm，node -v npm -v 查看是否安装成功。

配置npm： 2.1 如果你使用代理，请设置代理，$ npm config set proxy http://username:password@server:port 如果使用国内代理，可以配置国内npm镜像，$ npm config set registry https://registry.npm.taobao.org 2.2 npm 安装分为本地和全局安装：

npm install express 本地安装会安装到当前文件夹

npm install -g express 全局安装会安装到固定的全局目录，默认为{ AppData }/npm，例如C:\Users\username\AppData\Roaming\npm

2.3 安装好之后，express 包就放在了工程目录下的 node_modules 目录中，因此在代码中只需要通过 require('express') 的方式就好，无需指定第三方包路径.

gulp

Gulp是基于Node.js的前端构建工具，通过Gulp的插件可以实现前端代码的编译（sass、less）、压缩、测试；图片的压缩；浏览器自动刷新等。这里直接给命令。

$ npm install -g gulp //安装全局gulp
$ npm init //初始化package
$ npm install gulp --save-dev //本地安装gulp
安装Gulp插件
- sass的编译（gulp-ruby-sass）
- 自动添加css前缀（gulp-autoprefixer）
- 压缩css（gulp-minify-css）
- js代码校验（gulp-jshint）
- 合并js文件（gulp-concat）
- 压缩js代码（gulp-uglify）
- 压缩图片（gulp-imagemin）
- 自动刷新页面（gulp-livereload）
- 图片缓存，只有图片替换了才压缩（gulp-cache）
- 更改提醒（gulp-notify）
- 清除文件（del）
```
$ npm install gulp-sass gulp-autoprefixer gulp-minify-css gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
```

创建一个gulpfile.js在根目录下，然后在里面加载插件：

var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');

创建任务


// Load plugins
var gulp = require('gulp'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
uglify = require('gulp-uglify'),
imagemin = require('gulp-imagemin'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
cache = require('gulp-cache'),
livereload = require('gulp-livereload'),
del = require('del');
// Styles
gulp.task('styles', function() {
return gulp.src('Components/**/*.scss')  //源文件地址
.pipe(sass().on('error', sass.logError))        //插件
//.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/css')) //生成文件地址
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss()) //压缩插件
.pipe(gulp.dest('dist/css'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('Components/**/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/js'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/js'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('IMG/**/*')
.pipe(cache(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })))
.pipe(gulp.dest('dist/images'))
.pipe(notify({ message: 'Images task complete' }));
});
// Clean
gulp.task('clean', function(cb) {
return del(['dist/css', 'dist/js', 'dist/img'], cb)
});

// Watch gulp.task('watch', function() { // Watch .scss files gulp.watch('Components//*.scss', ['styles']); // Watch .js files gulp.watch('Components/*/.js', ['scripts']); // Watch image files gulp.watch('IMG//*', ['images']); // Create LiveReload server livereload.listen(); // Watch any files in dist/, reload on change gulp.watch(['dist/**']).on('change', livereload.changed); });

// Default task gulp.task('default', ['clean'], function() { gulp.start('styles'); });

gulp.task这个API用来创建任务，在命令行下可以输入$ gulp styles来执行上面的任务。

gulp.src这个API设置需要处理的文件的路径，可以是多个文件以数组的形式[main.scss, vender.scss]，也可以是正则表达式/**/*.scss。

我们使用.pipe()这个API将需要处理的文件导向sass插件，那些插件的用法可以在github上找到。

gulp.dest()API设置生成文件的路径，一个任务可以有多个生成路径，一个可以输出未压缩的版本，另一个可以输出压缩后的版本。

7. livereload

使用 BrowserSync 和 gulp，你可以轻松地创建一个开发服务器，然后同一个 WiFi 中的任何设备都可以方便地访问到。BrowserSync 同时集成了 live-reload 所以不需要另外做配置了。
首先安装模块：

$ npm install --save-dev browser-sync

然后，考虑拥有如下的目录结构...

gulpfile.js app/ styles/ main.css scripts/ main.js index.html

通过如下的 gulpfile.js，你可以轻松地将 app 目录中的文件加到服务器中，并且所有的浏览器都会在文件发生改变之后自动刷新：
```javascript
var browserSync = require('browser-sync');
var reload = browserSync.reload;

// 监视文件改动并重新载入
gulp.task('serve', function() {
  browserSync({
  server: {
  baseDir: 'app'
  }
  });

  gulp.watch(['*.html', 'styles/**/*.css', 'scripts/**/*.js'], {cwd: 'app'}, reload);
});
```javascript
在 index.html 中引入 CSS：
```html
<html>
  <head>
  ...
  <link rel="stylesheet" href="styles/main.css">
  ...

通过如下命令启动服务，并且打开一个浏览器，访问默认的 URL (http://localhost:3000)： gulp serve

CSS 预处理器

一个常见的使用案例是当 CSS 文件文件预处理之后重载它们。以 sass 为例，这便是你如何指示浏览器无需刷新整个页面而只是重载 CSS。

考虑有如下的文件目录结构...

gulpfile.js
app/
  scss/
  main.scss
  scripts/
  main.js
  index.html

... 通过如下的 gulpfile.js，你可以轻松地监视 scss 目录中的文件，并且所有的浏览器都会在文件发生改变之后自动刷新：

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('sass', function() {
  return sass('scss/styles.scss')
  .pipe(gulp.dest('app/css'))
  .pipe(reload({ stream:true }));
});

// 监视 Sass 文件的改动，如果发生变更，运行 'sass' 任务，并且重载文件
gulp.task('serve', ['sass'], function() {
  browserSync({
  server: {
  baseDir: 'app'
  }
  });

  gulp.watch('app/scss/*.scss', ['sass']);
});
```javascript
在 index.html 文件中引入预处理后的 CSS 文件：

... ... ``` 通过如下命令启动服务，并且打开一个浏览器，访问默认的 URL (http://localhost:3000)： gulp serve

TongtongGitHub / Blog

Gulp: 前端开发自动化 #5

NPM

gulp