We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
gulp官网介绍说是一个基于流的自动化构建工具,并且易于使用,构建快速。
gulp
开发过程中,我们通常需要自己手动编译、合并、压缩等等,这是一件繁琐的事情,但有了 gulp之后,我们可以通过配置好任务,一键运行,免去这些需要手动的繁琐事情。
gulp是基于nodejs的,因此需要先安装好nodejs环境。安装 nodejs环境不是重点,略过。
nodejs
有了nodejs和npm包管理器,就可以安装gulp。
npm
$ npm install -g gulp
这是全局安装gulp,也要在项目下安装gulp。在这之前,要先在项目根目录下新建好package.json文件。
package.json
// 新建 package.json 文件 $ npm init
作为项目的开发依赖安装:
$ npm install --save-dev gulp
安装好后再次输入gulp -v查看版本号,出现版本号即为安装成功。
gulp -v
安装命令:
$ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
gulp.task(name[, deps], fn) 定义任务 name:任务名称 deps:依赖任务名称 fn:回调函数 gulp.run(tasks...):尽可能多的并行运行多个task gulp.watch(glob, fn):当glob内容发生改变时,执行fn gulp.src(glob):置需要处理的文件的路径,可以是多个文件以数组的形式,也可以是正则 gulp.dest(path[, options]):设置生成文件的路径
首先,在项目根目录下新建一个gulpfile.js文件
gulpfile.js
var gulp = require('gulp'), sass = require('gulp-ruby-sass');
gulp.task('styles', function() { var cssSrc = './src/sass/*.scss', // 要编译的文件路径 cssDst = './dist/styles'; // 编译后放置的文件路径 return sass(cssSrc, {style: 'expanded'}) .pipe(gulp.dest(cssDst)); });
$ gulp styles
从图上可以看出,运行之后多出了dist目录, 编译后的css文件就存放在了styles文件夹里。
dist
css
gulp.task('watch', function() { // 看守所有.scss档 gulp.watch('src/styles/**/*.scss', ['styles']); });
gulp.task('default', function() { gulp.start('styles', 'watch'); });
default可以预设一些任务,当我们任务增多的时候,就不需要gulp [task]去指定任务了。直接运行 gulp就能运行default预设的任务。
default
gulp [task]
载入之前,需要确保已经$ npm install --save [gulp-xxx]这些包。
$ npm install --save [gulp-xxx]
var gulp = require('gulp'), sass = require('gulp-ruby-sass'), autoprefixer = require('gulp-autoprefixer'), cssnano = require('gulp-cssnano'), 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');
gulp.task('styles', function() { return sass('src/styles/main.scss', { style: 'expanded' }) .pipe(autoprefixer('last 2 version')) .pipe(gulp.dest('dist/assets/css')) .pipe(rename({suffix: '.min'})) .pipe(cssnano()) .pipe(gulp.dest('dist/assets/css')) .pipe(notify({ message: 'Styles task complete' })); });
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/assets/js')) .pipe(rename({suffix: '.min'})) .pipe(uglify()) .pipe(gulp.dest('dist/assets/js')) .pipe(notify({ message: 'Scripts task complete' })); });
gulp.task('images', function() { return gulp.src('src/images/**/*') .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true })) .pipe(gulp.dest('dist/assets/img')) .pipe(notify({ message: 'Images task complete' })); });
gulp.task('clean', function() { return del(['dist/assets/css', 'dist/assets/js', 'dist/assets/img']); });
gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); });
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']); });
// 载入 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'), clean = require('gulp-clean'), concat = require('gulp-concat'), notify = require('gulp-notify'), cache = require('gulp-cache'), livereload = require('gulp-livereload'); // 样式 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' })); }); // 脚本 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' })); }); // 图片 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' })); }); // 清理 gulp.task('clean', function() { return gulp.src(['dist/styles', 'dist/scripts', 'dist/images'], {read: false}) .pipe(clean()); }); // 预设任务 gulp.task('default', ['clean'], function() { gulp.start('styles', 'scripts', 'images'); }); // 看守 gulp.task('watch', function() { // 看守所有.scss档 gulp.watch('src/styles/**/*.scss', ['styles']); // 看守所有.js档 gulp.watch('src/scripts/**/*.js', ['scripts']); // 看守所有图片档 gulp.watch('src/images/**/*', ['images']); // 建立即时重整伺服器 livereload.listen(); // 看守所有位在 src/ 目录下的档案,一旦有更动,便进行重整 gulp.watch(['src/**']).on('change', function(file) { licereload.changed(file.path); }); });
The text was updated successfully, but these errors were encountered:
No branches or pull requests
gulp 简介
gulp
官网介绍说是一个基于流的自动化构建工具,并且易于使用,构建快速。开发过程中,我们通常需要自己手动编译、合并、压缩等等,这是一件繁琐的事情,但有了
gulp
之后,我们可以通过配置好任务,一键运行,免去这些需要手动的繁琐事情。安装 gulp
gulp
是基于nodejs
的,因此需要先安装好nodejs
环境。安装nodejs
环境不是重点,略过。有了
nodejs
和npm
包管理器,就可以安装gulp
。这是全局安装
gulp
,也要在项目下安装gulp
。在这之前,要先在项目根目录下新建好package.json
文件。作为项目的开发依赖安装:
安装好后再次输入
gulp -v
查看版本号,出现版本号即为安装成功。常用
gulp
插件安装命令:
gulp
最常用的几个命令小例子:编译SASS
首先,在项目根目录下新建一个
gulpfile.js
文件1. 引入需要的插件:
2. 创建任务
3. 运行任务
从图上可以看出,运行之后多出了
dist
目录, 编译后的css
文件就存放在了styles文件夹里。4. 监听文件改动
5. default 任务
default
可以预设一些任务,当我们任务增多的时候,就不需要gulp [task]
去指定任务了。直接运行gulp
就能运行default
预设的任务。构建项目
1. 载入
gulp
插件载入之前,需要确保已经
$ npm install --save [gulp-xxx]
这些包。2. 编译sass,自动添加前缀,压缩css
3. JSHint,合并js文件, 压缩js
4. 压缩图片
5. 构建之前清空
6. 预设任务
7. 监听文件改动
8. 完整的 gulpfile.js
参考资料
The text was updated successfully, but these errors were encountered: