基于gulp搭建一个h5页面模板-搭建项目

初始化项目

npm init(一路默认)

安装所需的依赖

gulp

npm install --save-dev gulp
根目录下新建gulpfile.js

browserSync

相当于热加载的一个工具,可多设备同步
npm install browser-sync --save-dev
地址:https://browsersync.io/docs/gulp

gulp-inject

自动注入css/js的一个工具
npm install gulp-inject --save-dev
//注入css js
gulp.task('dev-inject', function () {
    var target = gulp.src(path.input.index);
    var assets = gulp.src([
        path.output.css+'/bundle.css',
        path.output.js+'/bundle.js'
    ], {
        read: false
    });
    return target
        .pipe(inject(assets, {
            ignorePath: 'app/dist/',
            addRootSlash: false,
            removeTags: true
        }))
        .pipe(gulp.dest(path.output.dist));
});

gulp-autoprefixer

自动补全css前缀
npm install gulp-autoprefixer --save-dev

gulp-concat

文件合并
npm install gulp-concat --save-dev

gulp-imagemin

图片压缩
npm install gulp-imagemin --save-dev

gulp.task('dev-images', function () {
    return gulp.src(path.input.image)
        .pipe(imagemin())
        .pipe(gulp.dest(path.output.image))
})

gulp-minify-css

压缩css
npm install gulp-minify-css --save-dev

gulp-less

编译less
npm install gulp-less --save-dev
gulp.task('dev-less', function () {
    var cssPlugins = plugins.stylesheets;
    return streamSeries(
        gulp.src(cssPlugins),
        gulp.src(path.input.css)
            .pipe(less())
            .pipe(autoprefixer()))
        .pipe(concat('bundle.css'))
        .pipe(gulp.dest(path.output.css))
        .pipe(browserSync.stream())
})

gulp-rename

重命名
npm install gulp-renames --save-dev

gulp-uglify

压缩js
npm install gulp-uglify --save-dev
gulp.task('dev-js', function () {
    var jsPlugins = plugins.javascripts
    return streamSeries(
        gulp.src(jsPlugins),
        gulp.src(path.input.js)
            )
        .pipe(concat('bundle.js'))
        .pipe(gulp.dest(path.output.js))
})

run-sequence

任务工作流
npm install  run-sequence --save-dev

stream-series

支持多个gulp.src
npm install  stream-seriese --save-dev

del

删除文件
npm install  del --save-dev

其他插件

    "animate.css": "^3.4.0",//动画
    "jquery": "^3.1.1",
    "normalize.css": "^5.0.0",//规则化css
    "swiper": "^3.2.7" //滑动切换库

github地址:https://github.com/BrotherWY/gulp-h5