gulp使用总结

2017-01-05 11:03:50来源:oschina作者:woodens人点击

第七城市

使用步骤 安装Node

说明:gulp是基于nodejs,理所当然需要安装nodejs;


安装:打开nodejs官网,点击硕大的绿色Download按钮,它会根据系统信息选择对应版本(.msi文件)。

命令行检查安装是否成功



node -v查看安装的nodejs版本,出现版本号,说明刚刚已正确安装nodejs。PS:未能出现版本号,请尝试注销电脑重试;


npm -v查看npm的版本号,npm是在安装nodejs时一同安装的nodejs包管理器。未能出现版本号,说明没安装成功;

使用npm安装模块速度有些慢,可以使用淘宝的cnpm
npminstall -g cnpm --registry=https://registry.npm.taobao.org 执行以上命令后安装插件可以用cnpm代替npm使用,速度会快很多 全局安装gulp插件

说明:全局安装gulp目的是为了通过它执行gulp任务;


安装:命令提示符执行npm install gulp -g;


查看是否正确安装:命令提示符执行gulp -v,出现版本号即为正确安装。 新建package.json文件

说明:package.json是基于nodejs项目必不可少的配置文件,它是存放在项目根目录的普通json文件;
可以手动新建该文件,也可命令行新建该文件npm init,建议命令行新建 本地安装gulp插件

安装:定位目录命令后提示符执行npm install --save-dev;


命令提示符执行npm install gulp-xxx --save-dev 多个插件可以用空格隔开npm install gulp-xxx gulp-xxx2 --save-dev

新建gulpfile.js文件

说明:gulpfile.js是gulp项目的配置文件,是位于项目根目录的普通js文件(其实将gulpfile.js放入其他文件夹下亦可)。
gulp只有四个API

gulp.src(globs[, options])
gulp.dest(path[, options])
gulp.task(name [, deps] [, fn])
gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])运行gulp

说明:命令提示符执行gulp 任务名称
当执行gulp default或gulp将会调用default任务里的所有任务[‘task1’,’task2’] webstorm或idea运行gulp

使用说明:右键gulpfile.js -->选择”Show Gulp Tasks”-->Gulp窗口,若出现”No task found”,选择右键”Reload tasks”,双击运行即可。

常见的插件基本使用

压缩js文件gulp-uglify使用方法.pipe(uglify())


变异sassgulp-sass使用方法.pipe(sass())


压缩css文件gulp-minify-css使用方法.pipe(minifyCSS())


添加CSS浏览器前缀gulp-autoprefixer使用方法.pipe(autoprefixer({browsers: 'last 2 versions'}))


压缩图片gulp-imagemin使用方法.pipe(imagemin({progressive:true}))


合并文件gulp-concat使用方法.pipe(concat('index.js'))


重命名文件gulp-rename使用方法.pipe(rename('index.min.js'))


压缩html文件gulp-html-minify使用方法.pipe(htmlminify())


js代码检查gulp-jshint使用方法.pipe(jshint()).pipe(jshint.reporter('default'));

使用范例


/*!
* gulp
* $ npm install gulp-ruby-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
*/
// Load plugins
var gulp = require('gulp'),
sass = require('gulp-ruby-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('src/styles/main.scss')
.pipe(sass({ style: 'expanded', }))
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(gulp.dest('dist/styles'))
.pipe(rename({ suffix: '.min' }))
.pipe(minifycss())
.pipe(gulp.dest('dist/styles'))
.pipe(notify({ message: 'Styles task complete' }));
});
// Scripts
gulp.task('scripts', function() {
return gulp.src('src/scripts/**/*.js')
.pipe(jshint('.jshintrc'))
.pipe(jshint.reporter('default'))
.pipe(concat('main.js'))
.pipe(gulp.dest('dist/scripts'))
.pipe(rename({ suffix: '.min' }))
.pipe(uglify())
.pipe(gulp.dest('dist/scripts'))
.pipe(notify({ message: 'Scripts task complete' }));
});
// Images
gulp.task('images', function() {
return gulp.src('src/images/**/*')
.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) {
del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img'], cb)
});
// Default task
gulp.task('default', ['clean'], function() {
gulp.start('styles', 'scripts', 'images');
});
// Watch
gulp.task('watch', function() {
// Watch .scss files
gulp.watch('src/styles/**/*.scss', ['styles']);
// Watch .js files
gulp.watch('src/scripts/**/*.js', ['scripts']);
// Watch image files
gulp.watch('src/images/**/*', ['images']);
// Create LiveReload server
livereload.listen();
// Watch any files in dist/, reload on change
gulp.watch(['dist/**']).on('change', livereload.changed);
});
第七城市

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台