认识Gulp

Posted 2020-08-24 YZ-M

gulp详细入门教程：http://www.ydcss.com/archives/18

安装gulp

前提：已经安装node.js、npm

$ npm install gulp --save-dev

gulp-sass：将scss编译成css的gulp插件

安装gulp-sass

$ npm install gulp-sass --save-dev

新建package.js文件

基于node.js项目必不可少的配置文件。

{
  "name": "gulpText",
  "version": "3.0.0",
  "scripts": {
    "init": "npm install"
  },
  "devDependencies": {
    "gulp": "^3.9.1",
    "gulp-sass": "^2.3.2",
  }
}

新建gulpfile.js文件

var gulp = require(‘gulp‘);
var sass=require(‘gulp-sass‘);

gulp.task(‘testSass‘,function(){
    gulp.src(‘distn/styles/main.scss‘) //该任务针对的文件
        .pipe(sass()) //该任务调用的模块
        .pipe(gulp.dest(‘src/css‘)); //将会在src/css下生成index.css
});

gulp.task(‘default‘,[‘testSass‘]);

运行gulp

右键gulpfile.js文件，选择”Show Gulp Tasks”，打开Gulp窗口，双击需要运行的任务即可。

 

gulp-concat：合并js文件

安装gulp-concat插件

$ npm install gulp-concat --save-dev

var concat = require(‘gulp-concat‘);
 
gulp.task(‘testVendor‘, function () {
    gulp.src([‘client/vendor/jquery.min.js‘, ‘client/vendor/angular.min.js‘])
        .pipe(concat(‘vendor2.js‘))
        .pipe(gulp.dest(‘src/js‘));
});

gulp.task(‘default‘, [‘testVendor‘]);