npm init 命令初始化当前文件夹后,在当前文件夹新建 gulpfile.js 文件。当前目录下的所有操作流都在 gulpfile.js 文件中定义。
gulp-uglify 安装:
- npm install --save-dev gulp-uglify
gulp-uglify 用来压缩 js 文件,使用的是 uglify 引擎。
- var gulp = require('gulp'); //加载gulp
- var uglify = require('gulp - uglify'); //加载js压缩
- // 定义一个任务 compass
- gulp.task('compass',
- function() {
- gulp.src(['js
- /*.js','!js/*.min.js']) //获取文件,同时过滤掉.min.js文件
- .pipe(uglify())
- .pipe(gulp.dest('javascript/')); //输出文件
- });*/
小技巧,第二个参数
是用来过滤掉后缀为 min.js,!感叹号为排除模式。
- '!js/*.min.js'
gulp-minify-css 安装:
- npm install --save-dev gulp-minify-css
可以使用它来压缩 CSS 文件
- var gulp = require('gulp');
- var minify = require('gulp - minify - css');
- gulp.task('cssmini',
- function() {
- gulp.src(['css
- /*.css', '!css/*.min.css']) //要压缩的css
- .pipe(minify())
- .pipe(gulp.dest('buildcss/'));
- });*/
gulp-minify-html 安装:
- npm install --save-dev gulp-minify-html
可以使用它来压缩 html 文件.
- var gulp = require('gulp');
- var htmlmini = require('gulp-minify-html');
- gulp.task('htmlmini', function () {
- gulp.src('*.html')
- .pipe(htmlmini())
- .pipe(gulp.dest('minihtml'));
- })
gulp-jshint 安装:
- npm install --save-dev gulp-jshint
可以用来检查 JS 的代码
- var gulp = require('gulp');
- var jshint = require("gulp-jshint");
- gulp.task('jsLint',
- function() {
- gulp.src('js
- /*.js')
- .pipe(jshint())
- .pipe(jshint.reporter()); // 输出检查结果
- });*/
gulp-concat 安装:
- npm install --save-dev gulp-concat
合并 CSS 与 JS 文件,减少 http 请求。
- var gulp = require('gulp');
- var concat = require("gulp-concat");
- gulp.task('concat',
- function() {
- gulp.src('js
- /*.js') //要合并的文件
- .pipe(concat('all.js')) // 合并匹配到的js文件并命名为 "all.js"
- .pipe(gulp.dest('dist/js'));
- });*/
gulp-less 安装:
- npm install --save-dev gulp-less
把 less 文件转换为 css。
- var gulp = require('gulp'),
- less = require("gulp-less");
- gulp.task('compile - less',
- function() {
- gulp.src('less
- /*.less')
- .pipe(less())
- .pipe(gulp.dest('dist/css'));
- });*/
gulp-sass 安装:
- npm install --save-dev gulp-sass
把 scss 文件转换为 sass 文件。
- var gulp = require('gulp'),
- sass = require("gulp-sass");
- gulp.task('compile - sass',
- function() {
- gulp.src('sass
- /*.sass')
- .pipe(sass())
- .pipe(gulp.dest('dist/css'));
- });*/
gulp-imagemin 安装:
- npm install --save-dev gulp-imagemin
可以使用 gulp-imagemin 的插件来压缩 jpg、png、gif 等图片。(imagemin 也是有插件的,是基于 imagemin 产生的插件,所以前缀是 imagenin 开头)
压缩 png 插件 - 安装:
- $npminstall--save-devimagemin-pngquant
gulpfile.js:
- var gulp = require('gulp');
- var imagemin = require('gulp - imagemin');
- var pngquant = require('imagemin - pngquant'); //png图片压缩插件
- gulp.task('
- default',
- function() {
- return gulp.src('src / images
- /*')
- .pipe(imagemin({
- progressive: true,
- use: [pngquant()] //使用pngquant来压缩png图片
- }))
- .pipe(gulp.dest('dist'));
- });*/
gulp-imagemin 的使用比较复杂一点,它本身也有很多插件,这里只是简单介绍一下,要想压缩不同格式的图片,必须对应安装不同的插件,这里只安装了 pngquant 插件。按照 nodejs 的模块化思想,每个 require 只包含一个功能,这样就可以达到按需加载的目的。
gulp-livereload 安装:
- npm install --save-dev gulp-livereload
当代码变化时,它可以帮助我们自动刷新页面,该插件最好配合谷歌浏览器,且要安装扩展插件,否则无效。
- var gulp = require('gulp'),
- less = require('gulp - less'),
- livereload = require('gulp - livereload');
- gulp.task('less',
- function() {
- gulp.src('less
- /*.less')
- .pipe(less())
- .pipe(gulp.dest('css'))
- .pipe(livereload());
- });
- gulp.task('watch', function() {
- livereload.listen(); //要在这里调用listen()方法
- gulp.watch('less/*.less', ['less']); //监听目录下的文件,若文件发生变化,则调用less任务。
- });
- */
来源: http://www.bubuko.com/infodetail-1991889.html