一、安装gulp和插件
1、安装gulp
1 | npm install gulp -g |
2、常用插件
- 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)
1 | 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 |
二、新建gulpfile.js
现在,组件安装完毕,我们需要新建gulpfile
文件以指定gulp
需要为我们完成什么任务。
在项目根目录新建一个js文件并命名为gulpfile.j
。
1 | // 引入 gulp |
注:
gulp五个常用方法task
,run
,watch
,src
,dest`
1、引入组件
1 | var gulp = require('gulp'); |
我们引入了核心的gulp和其他依赖组件,接下来,分开创建lint, sass, scripts 和 default这四个不同的任务。
2、Lint任务
1 | gulp.task('lint', function() { |
Link任务会检查js/
目录下得js文件有没有报错或警告。
3、Sass任务
1 | gulp.task('sass', function() { |
Sass任务会编译scss/
目录下的scss文件,并把编译完成的css文件保存到/css
目录中。
4、Scripts 任务
1 | gulp.task('scripts', function() { |
scripts任务会合并js/
目录下得所有得js文件并输出到dist/
目录,然后gulp会重命名、压缩合并的文件,也输出到dist/
目录。
5、default任务
1 | gulp.task('default', function(){ |
这时,我们创建了一个基于其他任务的default任务。使用.run()
方法关联和运行我们上面定义的任务,使用.watch()
方法去监听指定目录的文件变化,当有文件变化时,会运行回调定义的其他任务。
现在,回到命令行,可以直接运行gulp任务了。
1 | gulp default |