gulp新手入门

什么是gulp：

gulp是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。

怎么安装gulp：

1. 安装node.js    基本node命令 npm install 安装依赖包  npm uninstall 卸载依赖包
2. 2.    npm install gulp –g 全局安装gulp

怎么使用gulp

怎么使用gulp:

什么是 gulpfile ：是gulp项目的配置文件

新建gulpfile.js文件 在里面书写 你要的gulp 功能(你想让gulp帮你完成什么你就写什么)

   

Gulp能干啥?

var gulp = require('gulp');  引入gulp

拷贝文件

(gulp 自带)

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

    gulp.src('package.json')

        .pipe(gulp.dest('../'));

});

合并文件

(需要npm install gulp-concat)

var concat=require('gulp-concat')   //引入依赖

-----------------------------------

.             .pipe(concat('style.css'))      //合并css文件到"style"

 

 

压缩文件

var imagemin = require('gulp-imagemin');//压缩image

//压缩图片

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

    gulp.src('img/*')

        .pipe(imagemin())

        .pipe(gulp.dest('../../../saas/devicetest/pc/img'));

});

var uglify = require('gulp-uglify');//压缩js文件

//压缩js

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

    gulp.src('js/json2.js')

        .pipe(uglify())

        .pipe(gulp.dest('../../../saas/devicetest/pc/js'));

});

var htmlmin = require('gulp-htmlmin');//压缩html

//压缩html

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

 

    var options = {

        removeComments: true,//清除HTML注释

        collapseWhitespace: true,//压缩HTML

        collapseBooleanAttributes: true,//省略布尔属性的值 <input checked="true"/> ==> <input />

        removeEmptyAttributes: true,//删除所有空格作属性值 <input id="" /> ==> <input />

        removeScriptTypeAttributes: true,//删除<script>的type="text/javascript"

        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"

        minifyJS: true,//压缩页面JS

        minifyCSS: true//压缩页面CSS

    }

 

    gulp.src('*.html')

        .pipe(htmlmin(options))

        .pipe(gulp.dest('../../../saas/devicetest/pc'));

});

编译SASS

(需要npm install gulp-sass )

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

gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass().on('error', sass.logError))
.pipe(gulp.dest('./css'));
});

压缩CSS

(需要npm install gulp-clean-css)

minify = require('gulp-clean-css');

 

//压缩css

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

    gulp.src('css/*.css')

        .pipe(minify())

        .pipe(gulp.dest('../../../saas/devicetest/pc/css'));

});

 

启动服务

var connect = require('gulp-connect');

    //起server 和 热更新

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

    connect.server({

        port:8020,

        livereload:true  //热更新

    });

});

监测文件

var watch = require('gulp-watch');

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

    gulp.watch('less/**/*.less', ['less']); //热更新less编译css

    gulp.watch('*.html',['html',’copy’]);//热更新html 并且自//动拷贝文件   (如果这个数组中去掉’copy’任务) 那么文件将不会在//*.html文件发生更改时 被拷贝  就是说copy任务被取消了

    gulp.watch('js/*.js',['js']);

    gulp.watch('css/*.css',['css']);

});

 

 

 

最后需要 定义好的任务运行一遍

gulp.task('default',[sass,'css','html','js','connect','minifyImg','clean','uglify','TestHtmlmin','watch','copy']);

 

 

 

什么是package.json

他是我们gulp 所需要的依赖包的 名称的记录者   它记录着我们这个项目所用到的依赖包

如何新建package.json

使用 npm init 命令

最后希望大家看看

Gulp 一点网教程http://www.ydcss.com/