@EncyKe
2017-03-10T03:32:03.000000Z
字数 4688
阅读 1457
#手记
npm install gulp --save
安装之后,需在项目根目录新建 gulpfile.js 文件,用于配置及编写构建程序。安装:
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
.
├── README.md
├── dist
│ ├── css
│ │ └── app.min.css
│ ├── img
│ │ ├── Sample-bg-large.jpeg
│ │ └── Sample-bg-mobile.png
│ ├── index.html
│ └── js
│ └── app.min.js
├── gulpfile.js
├── package.json
└── src
├── css
│ └── app.scss
├── img
│ ├── Sample-bg-large.jpeg
│ └── Sample-bg-mobile.png
└── js
└── app.js
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var cache = require('gulp-cache');
var livereload = require('gulp-livereload');
var del = require('del');
gulp.task
用于创建任务;gulp.src
用于设置需要处理的文件路径;gulp.dest
用于设置生成文件的路径;gulp.watch
用于监听文件变化;gulp.run
gulp.task('css', function() {
return gulp.src('./src/css/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(minifycss())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/css'))
.pipe(notify({ message: 'css task is completed!' }));
});
gulp.task('sass', function() {});
定义后,在命令行运行 npm sass
即可执行该任务;gulp.src
可以用数组形式选取多个文件:gulp.src([app.scss, main.scss]);
,也可以是正则匹配:gulp.src(/**/*.scss);
;.pipe()
即管道,将当前任务执行完的结果按次序导入下一任务;
gulp.task('js', function() {
return gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/js'))
.pipe(notify({ message: 'js task is completed!' }));
});
gulp.task('img', function() {
return gulp.src('./src/img/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('./dist/img'))
.pipe(notify({ message: 'img task is completed' }));
});
gulp.task('watch', function() {
gulp.watch('./src/css/*.scss', ['css']);
gulp.watch('./src/js/*.js', ['js']);
gulp.watch('./src/img/*', ['img']);
livereload.listen();
gulp.watch(['./dist/**']).on('change', livereload.changed);
});
gulp.task('dev', ['css', 'js', 'img'], function() {
gulp.start('watch');
});
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var minifycss = require('gulp-minify-css');
var jshint = require('gulp-jshint');
var uglify = require('gulp-uglify');
var imagemin = require('gulp-imagemin');
var rename = require('gulp-rename');
var concat = require('gulp-concat');
var notify = require('gulp-notify');
var cache = require('gulp-cache');
var livereload = require('gulp-livereload');
var del = require('del');
/**
* @description `gulp dev` 任务
* 1. 编译 SASS 并压缩成 CSS;
* 2. 压缩、校检 JS;
* 3. 压缩图片;
* 4. 监听文件变化持续执行;
*/
gulp.task('dev', ['css', 'js', 'img'], function() {
gulp.start('watch');
});
/**
* @description `gulp watch` 任务:监听文件变化执行对应的任务
*/
gulp.task('watch', function() {
gulp.watch('./src/css/*.scss', ['css']);
gulp.watch('./src/js/*.js', ['js']);
gulp.watch('./src/img/*', ['img']);
// livereload.listen();
// gulp.watch(['./dist/**']).on('change', livereload.changed);
});
/**
* @description 清空文件
*/
gulp.task('clean', function(cb) {
del(['./dist/css', './dist/js', './dist/img'], cb);
});
/**
* @description `gulp css` 任务:CSS 相关
* 1. 编译 SASS;
* 2. 自动追加前缀;
* 3. 压缩 CSS;
*/
gulp.task('css', function() {
return gulp.src('./src/css/*.scss')
.pipe(sass())
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(minifycss())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/css'))
.pipe(notify({ message: 'css task is completed!' }));
});
/**
* @description `gulp js` 任务:JS 相关
* 1. JS 代码校检;
* 2. 合并压缩;
*/
gulp.task('js', function() {
return gulp.src('./src/js/*.js')
.pipe(jshint())
.pipe(jshint.reporter('default'))
.pipe(uglify())
.pipe(rename({suffix: '.min'}))
.pipe(gulp.dest('./dist/js'))
.pipe(notify({ message: 'js task is completed!' }));
});
/**
* @description `gulp img` 任务:图片压缩
*/
gulp.task('img', function() {
return gulp.src('./src/img/*')
.pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
.pipe(gulp.dest('./dist/img'))
.pipe(notify({ message: 'img task is completed' }));
});