gulp学习入门一丢丢

1，新建一个文件夹，在当前文件夹打开命令窗口"shift+右键+在此处打开命令行窗口"；

2，用的淘宝镜像，cnpm init创建package.json 填写一些项目名称，说明，版本，作者之类的东西就行；

3，创建一个gulpfile.js文件，编辑器打开它，里面来个小任务，我打算将scss文件编译成css文件，需要用到gulp-sass插件和gulp插件，require引入,
var gulp=require('gulp'),sass=require('gulp-sass');

安装插件cnpm install gulp --save-dev

              cnpm install gulp-sass --save-dev

4，创建src/css/test.scss,这个是我的scss文件，创建一个任务sass,用gulp.src()找到src/css/test.scss,编译,返回css
gulp.task('sass',function(){

return gulp.src('src/css/test.scss').pipe(sass()).pipe(gulp.dest('src/css'));

})

5，创建默认事件,默认执行‘sass’和'watch1'事件;

gulp.task('default',['sass','watch1']);

6，创建监听事件'watch1',监听'src/css/test.scss',当它change的时候，自动执行'sass'事件,自动编译成css文件

gulp.task('watch1',function(){

return gulp.watch('src/css/test.scss',['sass'])

})

7，启动gulp任务，当前页面打开控制台，gulp sass会执行sass任务；gulp会执行默认任务'default';

接下来我们就可以写scss了，写完之后自动生成一个css;

代码

var gulp=require('gulp'),
    sass=require('gulp-sass');
gulp.task('sass',function(){
    return gulp.src('src/css/test.scss')
        .pipe(sass())
        .pipe(gulp.dest('src/css'))
})
gulp.task('default',['sass','watch1'])
gulp.task('watch1',function(){
    return gulp.watch('src/css/test.scss',['sass'])
})

目录

控制台